<template>
  <div>
    <div class="jobs">
      <div v-for="(job, idx) in data.jobs" :key="idx" class="job">
        <span class="icon-wrap">
          <el-icon v-if="job.status === 'success'" color="#67C23A"><SuccessFilled /></el-icon>
          <el-icon v-else-if="job.status === 'in-progress-overdue'" color="#F56C6C"><WarningFilled /></el-icon>
          <el-icon v-else-if="job.status === 'finish-overdue'" color="#F56C6C"><SuccessFilled /></el-icon>
        </span>
        <span class="dept-name ellipsis" :title="job.name">{{ job.name }}</span>
      </div>
    </div>
    <div class="node-wrapper">
      <div class="info">
        <div class="title">{{ data.title }}</div>
        <div class="line"></div>
        <div class="meta" @click="handleOpen">
          <div>涉及{{ data.positions }}个岗位</div>
          <div>&emsp;&emsp;{{ data.tasks }}项任务</div>
        </div>
        <div class="btn">
          {{ isFinished ? '实际完成时间' : '计划完成时间' }}
          <!-- <span class="date">{{ isFinished ? data.finishTime : data.planTime }}</span> -->
        </div>
        <div v-if="data.overdue && data.overdue > 0" class="overdue">
          <el-icon color="#F56C6C"><WarningFilled /></el-icon>
          <span>逾期：{{ data.overdue }}天</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, inject, computed } from 'vue'
import { SuccessFilled, WarningFilled } from '@element-plus/icons-vue'
import { ElIcon } from 'element-plus'
const getGraph = inject('getGraph')
const graph = getGraph()
const getNode = inject('getNode')
const data = ref({
  finishTime: '',
  planTime: '',
  status: '',
  jobs: [],
  positions: 0,
  tasks: 0,
  overdue: 0,
})
// 是否完成
const isFinished = computed(() => data.value.status === 'finished' || data.value.status === 'finished-overdue')
const handleOpen = () => {
  //发送自定义事件
  graph.trigger('openDialog', data.value)
}
onMounted(() => {
  const node = getNode()
  data.value = node.getData()
  node.on('change:data', ({ current }) => {
    data.value = current
  })
})
</script>

<style scoped lang="scss">
// 定义mixin
@mixin border-color {
  border: 1px solid #bbb;
  border-radius: 8px;
}
.jobs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 6px;

  .job {
    display: flex;
    align-items: center;
    gap: 4px;
    @include border-color;
    margin-bottom: 5px;
    padding: 5px 10px;
    .icon-wrap {
      width: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .dept-name {
      flex: 1;
      margin-left: 20px;
    }
  }
}

.node-wrapper {
  border: 1px solid #bbb;
  border-radius: 8px;
  background: #fff;
  min-width: 180px;
  min-height: 180px;
  padding: 8px 12px;
  box-sizing: border-box;
  justify-content: center;
}

.info {
  padding-top: 6px;
  .title {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 2px;
    text-align: center;
  }
  .line {
    width: 100%;
    height: 1px;
    background: #000;
    margin: 10px 0;
  }
  .meta {
    font-size: 14px;
    color: #333;
    margin-bottom: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: center;
    cursor: pointer;
  }
  .btn {
    @include border-color;
    font-size: 14px;
    margin: 10px 0;
    text-align: center;
    padding: 5px 10px;
  }
  .date {
    color: #111;
    font-weight: bold;
    margin-left: 4px;
  }
  .overdue {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 14px;
  }
}
</style>
